<template>
  <div v-loading="loading">
    <div class="content-header">
      <span>登出规则设置</span>
      <el-button
        type="primary"
        @click="save">保存</el-button>
    </div>
    <div class="content-body">
      <div class="base-set">
        <div class="base-item">
          <span class="left-text">Web页最长空闲时间</span>
          <el-input v-model="form.maximumIdleTime" maxlength="8" />
          <el-select
            v-model="form.maximumIdleTimeUnit"
            class="el-select"
            placeholder="请选择">
            <el-option
              v-for="sitem in options"
              :key="sitem.value"
              :label="sitem.label"
              :value="sitem.value" />
          </el-select>
          自动登出
        </div>
        <div class="base-item">
          <span class="left-text">移动端最长免登录时间</span>
          <el-input v-model="form.maximumLoginFreeTime" maxlength="8" />
          <el-select
            v-model="form.maximumLoginFreeTimeUnit"
            class="el-select"
            placeholder="请选择">
            <el-option
              v-for="sitem in options"
              :key="sitem.value"
              :label="sitem.label"
              :value="sitem.value" />
          </el-select>
          免登录
        </div>
      </div>
      <div class="more-device-login-setting">
        <div class="title">多手机设备登录设置</div>
        <el-radio-group v-model="form.multDeviceLogin">
          <el-radio :label="1">允许（可同时登录最多3台手机设备）</el-radio>
          <el-radio :label="2">不允许（仅可同时登录一台手机设备）</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import {
  enterpriseSecurityConfigQueryAPI,
  enterpriseSecurityConfigSaveAPI
} from '@/api/admin/enterpriseSecuritySetting'

import Lockr from 'lockr'

export default {
  // 登出规则设置
  name: 'LogoutRuleSetting',

  components: {},

  data() {
    return {
      loading: false, // 展示加载中效果

      form: {
        maximumIdleTime: 30,
        maximumIdleTimeUnit: 1,
        maximumLoginFreeTime: 30,
        maximumLoginFreeTimeUnit: 1,
        multDeviceLogin: 1
      },
      options: [
        { label: '天', value: 1 },
        { label: '小时', value: 2 },
        { label: '分钟', value: 3 }
      ],
      configId: null
    }
  },

  created() {
    this.queryConfig()
  },

  methods: {
    /**
     * @description: 查询登出规则
     * @return {*}
     */
    queryConfig() {
      this.loading = true
      const params = {
        type: 2 // 登出规则
      }
      enterpriseSecurityConfigQueryAPI(params).then(res => {
        const {
          maximumIdleTime = 30,
          maximumIdleTimeUnit = 1,
          maximumLoginFreeTime = 30,
          maximumLoginFreeTimeUnit = 1,
          multDeviceLogin = 1,
          configId
        } = res.data || {}

        this.form = {
          maximumIdleTime,
          maximumIdleTimeUnit,
          maximumLoginFreeTime,
          maximumLoginFreeTimeUnit,
          multDeviceLogin
        }
        this.configId = configId
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 保存操作
     */
    save() {
      this.loading = true
      const params = {
        configType: 2,
        ...this.form
      }

      if (this.configId) {
        params.configId = this.configId
      }

      enterpriseSecurityConfigSaveAPI(params)
        .then(res => {
          this.loading = false
          this.$message.success('操作成功')

          // 重置登出规则
          this.$store.dispatch('GetLoginOutConfig')
            .then(() => {
              Lockr.rm('clearPageTime')
            })
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./index.scss";

.base-item {
  margin-bottom: 20px;

  .left-text {
    display: inline-block;
    width: 150px;
  }
}

.el-input {
  width: 100px;
  margin-right: 10px;
}

.el-select {
  width: 100px;
  margin-right: 10px;
}

.title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #172b4d;
}
</style>

